<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="wangrui">
    <script src="jquery-3.1.1.js"></script>
    <title></title>
    <style>
        input{
            display: none;
        }
        img{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <form>
        <div id="chooseImg">
            <img src="images/add.png" alt="">
            <input type="file">
            <img src="images/add.png" alt="">
            <input type="file">
            <img src="images/add.png" alt="">
            <input type="file">
        </div>
        <div>
            <button type="button">添加</button>
            <button type="submit">上传</button>
        </div>
    </form>
</body>
</html>
<script>
    // 点击添加按钮，添加一对<img>和<input>
    $('button').eq(0).click(function(){
        $('#chooseImg').append('<img src="images/add.png" alt=""><input type="file">');
    });

    // 点击图片实现选择文件的效果
    // 如果想要给后添加的占位图，也实现选择文件的效果，最好实用代理事件，否则
    // 用click(),新添加的占位图不能实现选择文件的效果
    
    // delegate()为匹配的所有元素绑定一个事件
    // 用法delegate(selector,event,func)
    // selector：选择器，选择给谁绑定事件
    // event：事件类型，比如：click
    // func：当触发事件后执行的操作
    // $('#chooseImg').delegate('img','click',function(){
    //     console.dir(this);
    //     $(this).next().click();
    // });

    // delegate()已经被弃用，可以使用on()来代替
    // 用法 on(event,selector,func)
    $('#chooseImg').on('click','img',function(){
        $(this).next().click();
    });

    // 显示图片的时候也要用delegate，理由同上
    // $('#chooseImg').delegate('input','change',function(){
    $('#chooseImg').on('change','input',function(){
        console.dir(this);
        // 取出上传的文件
        var file = this.files[0];
        // 如果是图片
        if(file.type.startsWith('image')){
            $(this).prev().attr('src',URL.createObjectURL(file));
        }
    });

</script>